<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的权益</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="./rights.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="view">
        <div class="header">
            <p class="title">尊享<span>9</span>项会员权益</p>
            <p class="tip">尊享会员专属权益，服务更贴心</p>
            <div class="list-container">
                <ul class="">
                    <li class="active">
                        <div class="warp">
                            <div>
                                <div class="ico all"></div>
                                <p>全部</p>
                            </div>
                        </div>

                    </li>
                    <li class="">
                        <div class="warp">
                            <div>
                                <div class="ico times"></div>
                                <p>次数</p>
                            </div>
                        </div>
                    </li>
                    <li class="">
                        <div class="warp">
                            <div>
                                <div class="ico discount"></div>
                                <p>折扣</p>
                            </div>

                        </div>
                    </li>
                    <li class='liAfter'>
                        <div class="warp">
                            <div>
                                <div class="ico other"></div>
                                <p>其他</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <span class="more-btn" onclick="pickerShow()">
                托尔斯泰特
                <div></div>
            </span>
            <div class="containerpicker"  >
                <div  class="mask" style="z-index: 1988;" onclick="pickerHide()"></div>
                <div class="content" style="background:#F6F6F6;z-index:1989" >
                    <div class="hd f-thin" >
                        <div class="back" style="display:none" >
                            <div class="ico-back theme-triangle" ></div><span class="theme-color"
                                >返回</span>
                        </div><span class="ui-nowrap" >筛选门店可用的权益</span>
                        <div class="close-container" >
                            <div class="ico-close" ></div>
                        </div>
                    </div>
                    <div class="bd" >
                        <p   class="custom-content red-text">
                            全部
                        </p>
                        <p   class="custom-content">
                            托尔斯泰特
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <ul class="rightsList">
            <li class="">
                <div class="f-thin warp">
                    <div class="details">
                        <div class="title">
                            全店服务
                        </div>
                        <p class="tip">永久有效</p>
                    </div>
                    <p class="num">8.5折</p>
                </div>
            </li>
        </ul>

        <div class="empty">
            暂无权益
        </div>
    </div>

    <div class="footer">
        <p>
            <a href="#">店铺主页</a><a href="#">会员中心</a><a href="#">关注店铺</a>
        </p>
        <p>由 眼管家 提供技术支持</p>
    </div>

    <script>
        // 滑动选择
        var starX, endX, offset, eventIndex
        offset = 55
        eventIndex = 0
        var ul = document.querySelector('.list-container ul')
        var li = document.querySelectorAll('.list-container ul li')
        ul.style.left = 'calc(20.8% - ' + offset + 'px)'
        ul.ontouchstart = function (e) {
            let touch = e.touches[0];
            starX = touch.clientX;
        };
        ul.ontouchend = function (e) {
            let changedTouches = e.changedTouches[0];
            endX = changedTouches.clientX;
            let distance = endX - starX
            if (Math.abs(distance) > 10) {
                if (distance > 0) {
                    if (offset > 55) {
                        for (let item of li) {
                            item.className = ''
                        }
                        eventIndex = eventIndex - 1
                        li[eventIndex].className = 'active'

                        offset = offset - 90
                        ul.style.left = 'calc(20.8% - ' + offset + 'px)'
                    }
                } else {
                    if (offset < 325) {
                        offset = offset + 90
                        ul.style.left = 'calc(20.8% - ' + offset + 'px)'
                        for (let item of li) {
                            item.className = ''
                        }
                        eventIndex = eventIndex + 1
                        li[eventIndex].className = 'active'
                    }
                }
            }
        };

         // 选择门店
            function pickerShow(){
                let mask = document.querySelector('.containerpicker .mask')
                let content = document.querySelector('.containerpicker .content')
                mask.style.display = 'block'
                content.style.height = '135px'
            };

            function pickerHide(){
                let mask = document.querySelector('.containerpicker .mask')
                let content = document.querySelector('.containerpicker .content')
                mask.style.display = 'none'
                content.style.height = '0px'
            }
    </script>
</body>

</html>